<template>
    <div>
        <h5>Count 组件</h5>
        <p>Count 的值是 ： {{ count }}</p>
        <!--  方法体只有一行时， 可以简写 -->
        <button @click="changeCount">Count+1按钮</button>
    </div>

</template>

<script>
    export default {
        // props 是自定义属性列表，允许使用通过自定义属性，为当前组件指定初始值
        // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
        // props中的数据，可以直接在模本结构中使用
        props: {
            initCount: {
                // 用default属性 定义属性的默认值
                // 在外界使用Count组件时，没有传递initCount属性，则默认值生效
                // 如果传递了值， 则使用传递的值
                default: 5,
                // 用type指定自定义属性的值类型
                // 如果传递过来的值不符合此类型，则会在终端报错
                type: Number,
                required: true
            }
        },
        data() {
            return {
                count: this.initCount
            }
        },
        methods: {
            changeCount() {
                this.count += 1
            }
        }
    }
</script>

<style lang="less">

</style>